<?php
    defined('EMONCMS_EXEC') or die('Restricted access');
// Thanks to Shervin for contributing this visualisation, see forum thread here: http://openenergymonitor.org/emon/node/600
    global $path, $embed;
    $feedid2 =null;
?>

<style type="text/css">
  html, body { background-color:#000000;}
  bar { height: 32px; background: red; }
</style>

<script type="text/javascript" src="<?php echo $path;?>Modules/vis/visualisations/smoothie/smoothie.js"></script>

<?php if (!$embed) { ?>
<h2 style="color:#888" ><?php echo tr("Smoothie"); ?></h2>
<div style="width:100%; height:400px;">
<?php } ?>

<canvas id="mycanvas" style="width: 100%; height: 100%;"></canvas>
<?php if (!$embed) { ?> </div> <?php } ?>

<script id="source" language="javascript" type="text/javascript">
var feedid = <?php echo $feedid; ?>;
var apikey = "<?php echo $apikey; ?>";
var ufac = "<?php echo $ufac; ?>";
var feedid2 = "<?php echo $feedid2; ?>";

var smoothie = new SmoothieChart({
    fps: 30
});
smoothie.streamTo(document.getElementById("mycanvas"), ufac);

var now = new Date().getTime();
var start = now - 10000;
var end = now;

var line1 = new TimeSeries();
var line2 = new TimeSeries();

// Used to filter out repeated data (Might be bad)
var old = 0;
var old1 = 0;
var lasttime = 0;

var canvas = document.getElementById('mycanvas'),
    context = canvas.getContext('2d');
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
resizeCanvas();


doSome();
setInterval(doSome, 2000);

function doSome() {
    var now = new Date().getTime();
    start = now - 10000;
    end = now;

    vis_feed_data(apikey, feedid, start, end, line1, 0);
    if (feedid2 != "") vis_feed_data(apikey, feedid2, start, end, line2, 1);
}

function vis_feed_data(apikey, feedid, start, end, line, oldref) {
    $.ajax({
        url: path + 'feed/timevalue.json',
        data: "&apikey=" + apikey + "&id=" + feedid, //+"&start="+start+"&end="+end+"&interval=10",
        dataType: 'json',
        async: true,
        success: function(data) {
            if (data.time != lasttime) {
                lasttime = data.time;
                line.append(data.time * 1000, data.value);
            }
        }
    });
}

smoothie.addTimeSeries(line1, {
    strokeStyle: 'rgb(0, 255, 0)',
    fillStyle: 'rgba(0, 255, 0, 0.4)',
    lineWidth: 3
});

if (feedid2 != "") {
    smoothie.addTimeSeries(line2, {
        strokeStyle: 'rgb(255, 0, 0)',
        fillStyle: 'rgba(255, 0, 0, 0.4)',
        lineWidth: 3
    });
}

</script>
